<template>
    <div class="member-aside">
        <el-card class="user-manage" shadow="hover">
            <h4>我的账户</h4>
            <div class="links">
                <RouterLink to="/member" exact-active-class="active"
                    >个人中心</RouterLink
                >
                <RouterLink to="/member/message" exact-active-class="active"
                    >消息通知</RouterLink
                >
                <RouterLink to="/member/info" exact-active-class="active"
                    >个人信息</RouterLink
                >
                <RouterLink
                    to="/member/securitySett"
                    exact-active-class="active"
                    >安全设置</RouterLink
                ><RouterLink to="/member/address" exact-active-class="active"
                    >地址管理</RouterLink
                ><RouterLink to="/member/my-points" exact-active-class="active"
                    >我的积分</RouterLink
                ><RouterLink
                    to="/member/invite-courteous"
                    exact-active-class="active"
                    >邀请有礼</RouterLink
                ><RouterLink to="/member/my-tracks" exact-active-class="active"
                    >我的足迹</RouterLink
                ><RouterLink to="/member/lucky-draw" exact-active-class="active"
                    >幸运抽奖</RouterLink
                >
            </div>
            <h4>交易管理</h4>
            <div class="links">
                <RouterLink to="/member/order" exact-active-class="active"
                    >我的订单</RouterLink
                >
                <RouterLink to="/member/coupon" exact-active-class="active"
                    >优惠券</RouterLink
                ><RouterLink to="/member/gift-card" exact-active-class="active"
                    >礼品卡</RouterLink
                ><RouterLink
                    to="/member/evaluate-sun-exposure"
                    exact-active-class="active"
                    >评价晒单</RouterLink
                ><RouterLink
                    to="/member/after-sale-service"
                    exact-active-class="after-sale-service"
                    >售后服务</RouterLink
                >
            </div>
            <h4>帮助中心</h4>
            <div class="links">
                <RouterLink to="/member/help-center" exact-active-class="active"
                    >帮助中心</RouterLink
                ><RouterLink
                    to="/member/online-service"
                    exact-active-class="active"
                    >在线客服</RouterLink
                >
            </div>
        </el-card>
    </div>
</template>

<script setup></script>

<style scoped lang="scss">
.member-aside {
    width: 220px;
    margin-right: 20px;
    border-radius: 2px;
    .user-manage {
        background-color: #fff;
        h4 {
            font-size: 18px;
            font-weight: 400;
            padding: 20px 52px 5px;
            border-top: 1px solid #f6f6f6;
        }

        .links {
            padding: 0 52px 10px;
        }

        a {
            display: block;
            line-height: 1;
            padding: 15px 0;
            font-size: 14px;
            color: #666;
            position: relative;
            transition: all 0.3s ease;
            &:hover {
                color: #da9233;
            }
            &.active {
                color: #da9233;

                &:before {
                    display: block;
                }
            }

            &:before {
                content: '';
                display: none;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                position: absolute;
                top: 19px;
                left: -16px;
                background-color: #da9233;
            }
        }
    }
}
</style>
